<template>
  <div
    class="main-page"
    style="min-width:1366px;"
  >
    <el-form ref="form">
      <!-- 搜索栏 -->
      <BaseSearchBar v-on:ChildSearchEvent="getSearchInstrucList"></BaseSearchBar>
    </el-form>
    <!-- 表单 -->
    <el-card
      :body-style="{ padding: '0px' }"
      class="box-card"
    >
      <div class="tableStyle">
        <el-table
          ref="multipleTable"
          class="card-table"
          :data="InstructionData"
          tooltip-effect="dark"
          style="font-size:12px"
          :header-cell-style="{ background: '#3F9DFD', color: '#FFF' }"
          size="medium"
          stripe
          height="634px"
          border
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column
            prop
            label="操作"
            show-overflow-tooltip
            width="250"
          >
            <template slot-scope="scope">
              <!-- <el-button
                type="text"
                size="mini"
                @click="dialogInstru(scope.row.id,scope.row.drugUniqueCode)"
              >查看说明书</el-button>
              <el-button
                type="text"
                size="mini"
                @click="dialogEditInstru(scope.row.id,scope.row.drugUniqueCode)"
              >编辑说明书</el-button>-->
              <el-button
                type="text"
                size="mini"
                v-if="scope.row.piDefine == 0&&scope.row.mdhsDrugId !=null"
                @click="copyInstruction(scope.row.id,scope.row.drugUniqueCode)"
              >编辑说明书</el-button>
              <el-button
                type="text"
                size="mini"
                v-else
                @click="dialogEditInstru(scope.row.id,scope.row.drugUniqueCode)"
              >编辑说明书</el-button>
              <!-- <el-button type="text" size="mini" v-if="scope.row.mdhsDrugId != null">编辑说明书</el-button> -->
              <el-button
                type="text"
                size="mini"
                v-if="scope.row.mdhsDrugId != null"
                @click="dialogInstru(scope.row.id,scope.row.drugUniqueCode)"
              >查看系统说明书</el-button>
              <el-button
                type="text"
                class="viewCustom"
                size="mini"
                v-if="scope.row.piDefine == 1"
                @click="dialogCustem(scope.row.id,scope.row.drugUniqueCode)"
              >查看自定义</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="drugCode"
            label="医院药品编码"
            show-overflow-tooltip
            width="110"
          />
          <el-table-column
            prop="drugName"
            label="医院给药途径名称"
            show-overflow-tooltip
            width="285"
          />
          <el-table-column
            prop="mdhsDrugName"
            label="配对药品名称"
            show-overflow-tooltip
            width="250"
          />
          <el-table-column
            prop="mdhsFormName"
            label="配对剂型"
            show-overflow-tooltip
            width="90"
          />
          <el-table-column
            prop="mdhsDrugSpec"
            label="配对规格"
            show-overflow-tooltip
            width="90"
          />
          <el-table-column
            prop="mdhsCompName"
            label="配对药品厂家"
            show-overflow-tooltip
          />
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[20,50, 100]"
            :page-size="queryInfo.pageList"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 查看系统说明书\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\  -->
    <el-dialog
      title="说明书详情"
      :visible.sync="dialogInstruVisible"
      width="70%"
      :before-close="handleClose"
    >
      <div style="display:flex">
        <el-card class="dialog-card">
          <div class="Card_body2">
            <el-form
              ref="form"
              :model="dialogData"
              label-width="80px"
            >
              <el-form-item label="药品名称">
                <el-input v-model="dialogData.drugName"></el-input>
              </el-form-item>
              <el-form-item label="剂型">
                <el-input v-model="dialogData.drugForm"></el-input>
              </el-form-item>
              <el-form-item label="规格">
                <el-input v-model="dialogData.drugSpec"></el-input>
              </el-form-item>
              <el-form-item label="生产厂家">
                <el-input v-model="dialogData.compName"></el-input>
              </el-form-item>
              <el-form-item label="批准文号">
                <el-input v-model="dialogData.approvalCode"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="dialog-card2">
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
          >
            <el-collapse-item
              v-for="(apply,index) in this.dialogData.InstrucList"
              :key="index"
              :title="apply.title"
              name="1"
            >
              <div>
                <p v-html="apply.content"></p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="dialogInstruVisible = false"
        >关闭</el-button>
      </span>
    </el-dialog>
    <!-- 编辑系统说明书\\\\\\\\\\\\\\\\\\\\\\ -->
    <el-dialog
      title="编辑说明书"
      :visible.sync="dialogEditInstruVisible"
      width="70%"
      :before-close="handleClose"
    >
      <div style="display:flex">
        <el-card class="dialog-card">
          <div class="Card_body2">
            <el-form
              ref="form"
              :model="dialogEditData"
              label-width="80px"
            >
              <el-form-item label="药品名称">
                <el-input v-model="dialogEditData.drugName"></el-input>
              </el-form-item>
              <el-form-item label="剂型">
                <el-input v-model="dialogEditData.drugForm"></el-input>
              </el-form-item>
              <el-form-item label="规格">
                <el-input v-model="dialogEditData.drugSpec"></el-input>
              </el-form-item>
              <el-form-item label="生产厂家">
                <el-input v-model="dialogEditData.compName"></el-input>
              </el-form-item>
              <el-form-item label="批准文号">
                <el-input v-model="dialogEditData.approvalCode"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="dialog-card2">
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
          >
            <el-collapse-item
              v-for="(apply,index) in this.dialogEditData.InstrucList"
              :key="index"
              name="1"
            >
              <template slot="title">
                {{apply.title}}
                <el-button
                  type="text"
                  style="color:red;margin-left:8px"
                  size="mini"
                  @click.stop.prevent="() => {}"
                  @click="getInstructionEntry(apply)"
                >编辑</el-button>
                <el-button
                  type="text"
                  style="color:red;margin-left:8px"
                  size="mini"
                  @click.stop.prevent="() => {}"
                  @click="adddialogVisible = true"
                >删除</el-button>
              </template>

              <div>
                <p v-html="apply.content"></p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="adddialogVisible = true"
        >新增条目</el-button>
        <el-button
          size="small"
          @click="whetherDeleteInstruction()"
        >删除自定义说明书</el-button>
        <el-button
          size="small"
          @click="editEntrySort()"
        >编辑条目排序</el-button>
        <el-button
          size="small"
          @click="dialogEditInstruVisible = false"
        >关闭</el-button>
      </span>
    </el-dialog>
    <!-- 编辑条目排序 -->
    <el-dialog
      title="编辑条目排序"
      :visible.sync="editEntryVisible"
      class="editDialog"
      width="30%"
      :before-close="handleClose"
    >
      <div style="width:100%;height:450px">
        <el-table
          :data="this.SortList"
          stripe
          height="400"
          style="width: 100%;font-size: 10px"
          :header-cell-style="{'text-align':'center'}"
          :row-style="{height:'40px'}"
          :cell-style="{'text-align':'center',padding:'0px'}"
        >
          <el-table-column
            prop="title"
            label="条目名称"
          ></el-table-column>
          <el-table-column label="当前排序">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.vindex"
                size="mini"
                @change="changeSort(scope.row.id,$event)"
                placeholder="请输入内容"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->

        <span
          slot="footer"
          class="dialog-footer"
        >
          <div class="SortFoot">
            <el-button
              style="margin-right:8px"
              type="primary"
              size="small"
              @click="SaveEditSort()"
            >保存条目排序</el-button>
            <el-button
              style="margin-right:8px"
              @click="SaveEditSort()"
              size="small"
            >取消</el-button>
          </div>
        </span>
      </div>
    </el-dialog>
    <!-- 自定义说明书详情\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\  -->
    <el-dialog
      title="自定义说明书详情"
      :visible.sync="dialogCustemVisible"
      width="70%"
      :before-close="handleClose"
    >
      <div style="display:flex">
        <el-card class="dialog-card">
          <div class="Card_body2">
            <el-form
              ref="form"
              :model="dialogCustemData"
              label-width="80px"
            >
              <el-form-item label="药品名称">
                <el-input v-model="dialogCustemData.drugName"></el-input>
              </el-form-item>
              <el-form-item label="剂型">
                <el-input v-model="dialogCustemData.drugForm"></el-input>
              </el-form-item>
              <el-form-item label="规格">
                <el-input v-model="dialogCustemData.drugSpec"></el-input>
              </el-form-item>
              <el-form-item label="生产厂家">
                <el-input v-model="dialogCustemData.compName"></el-input>
              </el-form-item>
              <el-form-item label="批准文号">
                <el-input v-model="dialogCustemData.approvalCode"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <el-card class="dialog-card2">
          <el-collapse
            v-model="activeNames"
            @change="handleChange"
          >
            <el-collapse-item
              v-for="(apply,index) in this.dialogCustemData.InstrucList"
              :key="index"
              :title="apply.title"
              name="1"
            >
              <div>
                <p v-html="apply.content"></p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="dialogCustemVisible = false"
        >关闭</el-button>
      </span>
    </el-dialog>
    <!-- 编辑单一条目 -->
    <el-dialog
      title="编辑单一条目"
      :visible.sync="editDialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-card>
        <el-input v-model="editSingleData.title"></el-input>
        <el-input
          type="textarea"
          :autosize="{ minRows: 12, maxRows: 12}"
          style="margin-top:15px"
          v-model="editSingleData.content"
        ></el-input>
      </el-card>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="saveEditEntry()"
        >保存编辑条目</el-button>
        <el-button
          size="small"
          @click="editDialogVisible = false"
        >关闭</el-button>
      </span>
    </el-dialog>
    <!-- 新增单一条目 -->
    <el-dialog
      title="新增条目"
      :visible.sync="adddialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-card>
        <el-input v-model="addDialogData.title"></el-input>
        <el-input
          type="textarea"
          :autosize="{ minRows: 12, maxRows: 12}"
          style="margin-top:15px"
          v-model="addDialogData.content"
        ></el-input>
      </el-card>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="addEditEntry()"
        >保存编辑条目</el-button>
        <el-button
          size="small"
          @click="adddialogVisible = false"
        >关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import BaseSearchBar from "./BaseSearchBar";
import BaseSearchBarItem from "../../../components/BaseSearchBarItem";
import {
  getInstructionList,
  dialogInstructionInfo,
  deleteInstruction,
  getInstructionData,
  EditInstructionInfo,
  getUserDetail,
  getInstructionEntry,
  saveEditInstruction,
  copyEditInstruction,
  getEditSort,
  SaveEditSort
} from "@/api/rad";
export default {
  name: "MainPage",
  components: {
    BaseSearchBar,
    BaseSearchBarItem
  },
  created: function() {
    this.getInstructionList();
  },
  methods: {
    handleSizeChange(newSize) {
      // console.log("handleSizeChange")
      this.queryInfo.pageList = newSize;
      this.getInstructionList();
    },
    // 当前展示的页面
    handleCurrentChange(newPage) {
      // console.log(newPage)
      // console.log("handleCurrentChange")
      // console.log("handleCurrentChange")
      this.queryInfo.pageSize = newPage;
      this.getInstructionList();
    },
    handleChange(val) {
      // console.log(val);
    },
    handleClose(done) {
      done();
    },
    async getInstructionList() {
      let _this = this;
      let res = await this.$rad.getInstructionList({
        srm: _this.queryInfo.srm,
        drugNameType: _this.queryInfo.drugNameType,
        toxiLevel: _this.queryInfo.toxiLevel,
        pregnancyLevel: _this.queryInfo.pregnancyLevel,
        piDefine: _this.queryInfo.piDefine,
        pageList: _this.queryInfo.pageList,
        pageSize: _this.queryInfo.pageList
      });
      // console.log(res)
      this.InstructionData = res.rows;
      this.total = res.total;
    },
    getSearchInstrucList(data) {
      this.queryInfo.srm = data.srm;
      this.queryInfo.drugNameType = data.drugNameType;
      this.queryInfo.toxiLevel = data.toxiLevel;
      this.queryInfo.pregnancyLevel = data.pregnancyLevel;
      this.queryInfo.piDefine = data.piDefine;
      // console.log(this.queryInfo)
      this.getInstructionList();
    },
    dialogInstru(id, drugUniqueCode) {
      this.dialogInstruVisible = true;
      // console.log(id)
      this.dialogData.id = id;
      this.dialogData.drugUniqueCode = drugUniqueCode;
      this.dialogInstructionInfo();
      this.getInstructionData();
    },
    dialogCustem(id, drugUniqueCode) {
      this.dialogCustemVisible = true;
      this.dialogCustemData.id = id;
      this.dialogCustemData.drugUniqueCode = drugUniqueCode;
      this.getUserDetail();
    },
    async dialogInstructionInfo() {
      let res = await this.$rad.dialogInstructionInfo({
        drugUniqueCode: this.dialogData.drugUniqueCode
      });
      this.dialogData.drugName = res.drugName;
      this.dialogData.drugForm = res.mdhsFormName;
      this.dialogData.drugSpec = res.mdhsDrugSpec;
      this.dialogData.compName = res.mdhsCompName;
      this.dialogData.approvalCode = res.approvalCode;
      console.log(res);
    },
    async getInstructionData() {
      let res = await this.$rad.getInstructionData({
        drugUniqueCode: this.dialogData.drugUniqueCode
      });
      // console.log(res)
      this.dialogData.InstrucTitle = res.dto.title;
      this.dialogData.InstrucList = res.dto.parms;
      console.log(this.dialogData);
      // console.log(this.dialogData.InstrucList)
    },
    // 复制说明书
    copyInstruction(id, drugUniqueCode) {
      this.$confirm("编辑之前需要复制一份系统说明, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.copyEditInstruction(drugUniqueCode);
        })
        .catch(() => {});
    },
    async copyEditInstruction(drugUniqueCode) {
      let res = await this.$rad.copyEditInstruction({
        drugUniqueCode: drugUniqueCode
      });
      console.log(res);
      if (res.code == 1) {
        this.getInstructionList();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    whetherDeleteInstruction() {
      this.$confirm("此操作将删除自定义说明书, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteInstruction();
        })
        .catch(() => {});
    },
    async deleteInstruction() {
      let res = await this.$rad.deleteInstruction({
        drugUniqueCode: this.dialogEditData.drugUniqueCode
      });
      console.log(res);
      if (res.code == 1) {
        this.dialogEditInstruVisible = false;
        this.getInstructionList();
        return this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
    // 编辑说明书
    dialogEditInstru(id, drugUniqueCode) {
      this.dialogEditData.id = id;
      this.dialogEditData.drugUniqueCode = drugUniqueCode;
      this.dialogEditInstrucInfo();
      this.EditInstructionInfo();
      this.dialogEditInstruVisible = true;
    },
    async dialogEditInstrucInfo() {
      let res = await this.$rad.dialogInstructionInfo({
        drugUniqueCode: this.dialogEditData.drugUniqueCode
      });
      this.dialogEditData.drugName = res.drugName;
      this.dialogEditData.drugForm = res.mdhsFormName;
      this.dialogEditData.drugSpec = res.mdhsDrugSpec;
      this.dialogEditData.compName = res.mdhsCompName;
      this.dialogEditData.approvalCode = res.approvalCode;
      console.log(res);
    },
    async EditInstructionInfo() {
      let res = await this.$rad.EditInstructionInfo({
        drugUniqueCode: this.dialogEditData.drugUniqueCode
      });
      this.dialogEditData.InstrucList = res;
      console.log(res);
    },
    async getUserDetail() {
      let res = await this.$rad.getUserDetail({
        drugUniqueCode: this.dialogCustemData.drugUniqueCode
      });
      console.log(res);
      //传值/////////////////////////////////////////////////////////////////////
      this.dialogCustemData.drugName = res.drugMatch.drugName;
      this.dialogCustemData.drugForm = res.drugMatch.mdhsFormName;
      this.dialogCustemData.drugSpec = res.drugMatch.mdhsDrugSpec;
      this.dialogCustemData.compName = res.drugMatch.mdhsCompName;
      this.dialogCustemData.approvalCode = res.drugMatch.mdhsCompName;
      this.dialogCustemData.InstrucList = res.dto.userPiList;
    },
    // 编辑说明书获取条目
    getInstructionEntry(index) {
      this.editDialogVisible = true;
      this.editSingleData = index;
      console.log(index);
    },
    // 编辑条目
    saveEditEntry() {
      this.saveEditInstruction(
        this.editSingleData.id,
        this.editSingleData.drugUniqueCode,
        this.editSingleData.title,
        this.editSingleData.content
      );
      this.editDialogVisible = false;
    },
    // 新增条目
    addEditEntry() {
      this.saveEditInstruction(
        0,
        this.dialogEditData.drugUniqueCode,
        this.addDialogData.title,
        this.addDialogData.content
      );
      this.dialogInstructionInfo();
      this.adddialogVisible = false;
      (this.addDialogData.title = ""),
        (this.addDialogData.content = ""),
        console.log(this.addDialogData);
    },
    async saveEditInstruction(id, drugUniqueCode, title, content) {
      let res = await this.$rad.saveEditInstruction({
        id: id,
        drugUniqueCode: drugUniqueCode,
        title: title,
        content: content
      });
      console.log(res);
      if (res.code == 1) {
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    async editEntrySort() {
      this.editEntryVisible = true;
      let res = await this.$rad.getEditSort({
        drugUniqueCode: this.dialogEditData.drugUniqueCode
      });
      console.log(res);
      this.SortList = res.rows;
    },
    SaveEditSort() {
      this.editEntryVisible = false;
    },
    async changeSort(id, e) {
      console.log(id);
      console.log(e);
      let res = await this.$rad.SaveEditSort({
        id: id,
        vindex: e
      });
      console.log(res);
      if (res.code == 1) {
        this.editEntrySort();
        return this.$message({
          type: "success",
          message: res.msg
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  },
  data() {
    return {
      // 列表的参数对象
      queryInfo: {
        srm: "",
        drugNameType: "",
        toxiLevel: "",
        pregnancyLevel: "",
        piDefine: "",
        // 当前的页数
        pageSize: 1,
        // 当前页显示多少数据
        pageList: 20
      },

      activeNames: ["1"],
      dialogInstruVisible: false,
      InstructionData: [],
      total: 0,
      dialogData: {
        id: "",
        drugName: "",
        drugForm: "",
        drugSpec: "",
        compName: "",
        approvalCode: "",
        textarea: "",
        drugUniqueCode: "",
        // 新增条目
        addInput: "",
        addTextarea: "",
        InstrucTitle: "",
        InstrucList: []
      },
      // 编辑说明书
      dialogEditInstruVisible: false,

      dialogEditData: {
        id: "",
        drugUniqueCode: "",
        drugName: "",
        drugForm: "",
        drugSpec: "",
        compName: "",
        approvalCode: "",
        InstrucList: []
      },
      // 编辑单一条目

      editDialogVisible: false,
      editSingleData: [],
      // 自定义说明书详情
      dialogCustemVisible: false,
      dialogCustemData: {
        id: "",
        drugName: "",
        drugForm: "",
        drugSpec: "",
        compName: "",
        approvalCode: "",
        textarea: "",
        drugUniqueCode: "",
        // 新增条目
        addInput: "",
        addTextarea: "",
        InstrucTitle: "",
        InstrucList: []
      },
      adddialogVisible: false,
      addDialogData: {
        title: "",
        content: ""
      },
      editEntryVisible: false,
      SortList: []
    };
  }
};
</script>
<style scoped>
.el-card {
  margin-left: 3px;
}
.SearchT {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
  background-color: #e6edf3;
  font-size: 14px;
}
.tableLable {
  flex: 1;
  text-align: left;
  margin-left: 15px;
  letter-spacing: 2px;
  font-size: 14px;
  color: #32a6f3;
  font-weight: bold;
}
.exportBtn {
  margin-right: 23px;
}
.BatchDeleBtn {
  margin-right: 15px;
}
.tableStyle {
  width: 100%;
  height: 100%;
}
.card-table {
  width: 100%;
  height: 75%;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
.dialog-card {
  width: 30%;
}
.dialog-card2 {
  width: 70%;
  margin-left: 15px;
}
.el-collapse >>> .el-collapse-item__header {
  font-weight: bold;
}
.viewCustom >>> span {
  color: deeppink;
}
.editDialog >>> .el-dialog__header {
  margin-bottom: 0px;
}
.editDialog >>> .el-dialog__body {
  padding-left: 0px;
  padding-right: 0px;
}
.SortFoot {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
